$("header").load("html/Threelevelmenu.html");
$("footer").load("html/footer.html");
var id = (window.location.search).replace("?", "");
// ajax数据渲染
$(function() {
	$.get('goodsAndShoppingCart/getGoodsInfo.php', {
		"goodsId": id
	}, function(data) {
		console.log(data);
		let arr = JSON.parse(data);
		let oDiv = document.getElementById("goods-header");
		let oSpan = document.createElement("span");
		oSpan.innerHTML = arr.goodsName;
		oDiv.appendChild(oSpan);
		$("#h1").html(arr.goodsName);
		$(".imgs-r-p").html(arr.beiyong6);
		$("#strong").html('￥:' + arr.goodsPrice);
		$("#del").html('￥:' + arr.goodsPrice);
		$("#small-box").css("backgroundImage", `url('${arr.beiyong1}')`);
		$("#big-box").css("backgroundImage", `url('${arr.beiyong1}')`);
		$("#show-ul-imgs1").attr("src", arr.beiyong1);
		$("#show-ul-imgs2").attr("src", arr.beiyong2);
		$("#show-ul-imgs3").attr("src", arr.beiyong3);
		$("#show-ul-imgs4").attr("src", arr.beiyong4);
		$("#show-ul-imgs5").attr("src", arr.beiyong5);
		$("#imgs-r-div4-7-num").html(arr.beiyong7);
	});
});
// +-判断
let oshuru = document.getElementById("shurushuliang");
let imgsrnum = document.getElementById("imgs-r-div4-7-num");
$(".imgs-r-div4-5").click(function() {
	oshuru.value = oshuru.value / 1 + 1;
	if (oshuru.value > Number(imgsrnum.innerHTML)) {
		oshuru.value = imgsrnum.innerHTML;
	}
});
$(".imgs-r-div4-6").click(function() {

	oshuru.value = oshuru.value / 1 - 1;
	if (oshuru.value < 1) {
		oshuru.value = 1;
	}
});
// $("#imgs-r-div5-btn2").click(function() {
// 	let oID = id;
// 	// console.log(oId);
// 	location.href = 'shoppingCart.html' + "?" + oID;
// });
console.log(getCookie('username'));
$("#imgs-r-div5-btn2").click(function() {
	$.post(
		"goodsAndShoppingCart/addShoppingCart.php", {
			"vipName": getCookie('username'),
			"goodsId": id,
			"goodsCount": $("#shurushuliang").val()
		},
		function(data) {
			if (data == "1") {
				alert("添加成功");
			} else if (data == "0") {
				alert("添加失败");
			}
		});
});


//放大镜
let oImgs = document.getElementsByClassName("show-ul-imgs");
let oSmallBox = document.getElementById("small-box");
let oBigBox = document.getElementById("big-box");
// let zz = oImgs[0].src;
// console.log(zz);
for (let i = 0; i < oImgs.length; i++) {
	oImgs[i].onclick = function() {
		let zz = oImgs[i].src;
		// oSmallBox.style.background = `url(indeximg/0${1+i}.jpg)`;
		oSmallBox.style.background = `url(${oImgs[i].src})`;
		oSmallBox.style.backgroundSize = "350px 350px";
		oBigBox.style.background = `url(${oImgs[i].src})`;
		oBigBox.style.backgroundSize = "1750px 1750px";
	}
}
class Magnifier {
	constructor(newSmallBox, newBigBox, newMask) {
		this.smallBox = newSmallBox;
		this.bigBox = newBigBox;
		this.mask = newMask;
	}
	//划入
	onmouseover() {
		let that = this;
		this.smallBox.onmouseover = function() {
			that.mask.style.display = "block";
			that.bigBox.style.display = "block";
		}
	}
	//划出
	onmouseout() {
		let that = this;
		this.smallBox.onmouseout = function() {
			that.mask.style.display = "none";
			that.bigBox.style.display = "none";
		}
	}
	//移动
	onmousemove() {
		let that = this;
		this.smallBox.onmousemove = function(evt) {
			let e = evt || event;
			let left = e.pageX - that.smallBox.offsetLeft - that.mask.offsetWidth / 2;
			let top = e.pageY - that.smallBox.offsetTop - that.mask.offsetHeight / 2;
			if (left < 0) {
				left = 0;
			}
			let maxLeft = that.smallBox.offsetWidth - that.mask.offsetWidth;
			if (left > maxLeft) {
				left = maxLeft;
			}
			if (top < 0) {
				top = 0;
			}
			let maxTop = that.smallBox.offsetHeight - that.mask.offsetHeight;
			if (top > maxTop) {
				top = maxTop;
			}
			that.mask.style.left = left + "px";
			that.mask.style.top = top + "px";
			//比例尺
			//小图片:大图片 = 小窗口:大窗口
			let x = left * that.bigBox.offsetWidth / that.mask.offsetWidth;
			let y = top * that.bigBox.offsetHeight / that.mask.offsetHeight;
			//背景图片的定位
			that.bigBox.style.backgroundPositionX = -x + "px";
			that.bigBox.style.backgroundPositionY = -y + "px";

		}
	}
}
// let oSmallBox = document.getElementById("small-box");

let oMask = document.getElementById("mask");
let mf = new Magnifier(oSmallBox, oBigBox, oMask);
mf.onmouseover();
mf.onmouseout();
mf.onmousemove();
